<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>Register</title>
<style type="text/css">
	.sportTable {
		border-collapse:collapse; 
	    border-spacing:0; 
	}
	.sportTable td{
		border: 1px solid #cccccc;
	}
	.registered, .nonregistered, .other {
		padding: 4px;
		color: white;
	}
	.registered {
		background-color: green;
	}
	.nonregistered {
		background-color: red;
	}
	.other {
		background-color: blue;
	}
	.done {
		padding: 4px;
		color: #cccccc;
	}
	.otherdone {
		padding: 4px;
		color: #cccccc;
		background-color: gray;
	}
</style>
<script type="text/javascript">
	$(function() {
		$("a.register-link").click(function() {
			var link = this;
			if ($(this).children("span").hasClass("registered") || $(this).children("span").hasClass("other")) {
				$("#dialog-cover").html($(this).html() + "重複簽到，確定覆蓋？");
				$("#dialog-cover").dialog({
					autoOpen: false,
					bgiframe: true,
					resizable: false,
					height:240,
					modal: true,
					overlay: {
						backgroundColor: '#000',
						opacity: 0.5
					},
					buttons: {
						'Yes': function() {
							window.location = link.href;
						},
						Cancel: function() {
							$(this).dialog('close');
						}
					}
				});
				$("#dialog-cover").dialog('open');
		    	return false;
			} else if ($(this).children("span").hasClass("done") || $(this).children("span").hasClass("otherdone")) {
				return false;
			}
		});
		
		
	});
</script>
</head>
<body>

	<div id="dialog-cover" title="注意"></div>

	<h1>${activity.name} 活動簽到名單</h1>
	
	<g:form method="post">
		<g:hiddenField name="id" value="${ activity.id }" />
		<g:textField name="uid" />
		<g:actionSubmit value="註冊" action="uidSubmit" class="uidSubmit"/>
	</g:form>
	
	<g:if test="${flash.message}">
    	<div class="message">${flash.message}</div>
    </g:if>	
	
	應出席${ activity.records.size() }人, 已出席${ registeredCount }人:
	<table class="categoryTable">
	<g:each var="category" in="${ Vcategory.list() }">
	<g:if test="${ CategoryTag.countByCategory(category) != 0 }">
	<tr>
		<td>${ category.name }</td>
		<td>
			<table class="sportTable">
			<g:each var="sport" in="${ Sport.list() }">
				<tr>
					<td>${ sport.name }</td>
					<td>
						<g:findAll var="record" in="${activity.records}" expr="${ it.person.categoryTags.category.contains(category) && it.person.sportTags.sport.contains(sport) }">
							<g:set var="bgStyle" value="nonregistered" />
							<g:if test="${ record.status == Status.REGISTERED.toString() }">
								<g:set var="bgStyle" value="registered" />
							</g:if>
							<g:if test="${ record.status == Status.OTHER.toString() }">
								<g:set var="bgStyle" value="other" />
							</g:if>
							<g:if test="${ record.status == Status.DONE.toString() }">
								<g:set var="bgStyle" value="done" />
							</g:if>
							<g:if test="${ record.status == Status.OTHERDONE.toString() }">
								<g:set var="bgStyle" value="otherdone" />
							</g:if>
							<g:link class="register-link" action="registerSubmit" params="[id:activity.id, 'person.id':record.person.id]" title="${ record.person.uid }"><span class="${bgStyle}">${record.person.name}</span></g:link>
						</g:findAll>
					</td>
				</tr>
			</g:each>
			</table>
		</td>
	</tr>
	</g:if>
	</g:each>
	</table>	
	
</body>
</html>